<div ui-view="" class="fade-in ng-scope">
	<div class="bg-light lter b-b wrapper-md ng-scope">
	  <h1 class="m-n font-thin h3" translate="forms.basic.name"></h1>
	</div>
	<div class="wrapper-md ng-scope" ng-controller="basicFormCtrl">
		<!-- 文本框 -->
		<div class="panel panel-default">
	        <div class="panel-heading font-bold" translate="forms.basic.text">
	        </div>
	        <div class="panel-body">
	        <form class="form-horizontal form-validation" method="get">
	        
        		<!--------------- 数字输入框Start --------------->
        		<div class="form-group">
		          <label class="col-sm-2 control-label">Spinner</label>
		          <div class="col-sm-10">
		              <div class="input-group bootstrap-touchspin">
		              <input type="number" name="number" ng-model="vm.number" value="10" class="form-control" data-min="0" data-max="20" step="10">
		              <span class="help-block m-b-none">数字输入框--基本属性(data-min:输入最小值,data-max:输入最大值,step:递增值) </span>
		              </div>
		          </div>
		        </div>
		        <!--------------- 数字输入框end --------------->
		        
		        <div class="line line-dashed b-b line-lg pull-in"></div>
		        
		        <!--------------- 带表单验证的文本框 Start--------------->
		        
		        <!--------------- 请输入1~32位字母、数字或下划线 Start--------------->
		        <div class="form-group">
		          <label class="col-sm-2 control-label">{{'text.remind'|translate}}</label>
		          <div class="col-sm-10">
		            <input  class="form-control" name="var0" required ng-pattern="app.reg.account" ng-model="vm.var0" maxlength="32"
		            uib-tooltip="{{'common.op.remind1' | translate}}" placeholder="{{'common.op.remind1' | translate}}">
		          </div>
		        </div>
		        <!--------------- 请输入1~32位字母、数字或下划线 end--------------->

		        <!--------------- 请输入1～128位字符，例如：XXX@XX.com Start--------------->
		        <div class="form-group">
		          <label class="col-sm-2 control-label">{{'text.remind'|translate}}</label>
		          <div class="col-sm-10">
		            <input  class="form-control" name="var1" required ng-pattern="app.reg.email" ng-model="vm.var1" maxlength="128"
		            uib-tooltip="{{'user.youxiangjiaoyan' | translate}}" placeholder="{{'user.youxiangjiaoyan' | translate}}">
		          </div>
		        </div>
		        <!--------------- 请输入1～128位字符，例如：XXX@XX.com end--------------->
		        
		        <!--------------- 请输入0-32位数字或中划线 Start--------------->
		        <div class="form-group">
		          <label class="col-sm-2 control-label">{{'text.remind'|translate}}</label>
		          <div class="col-sm-10">
		            <input  class="form-control" name="var2" required ng-pattern="app.reg.phone" ng-model="vm.var2" maxlength="32"
		            uib-tooltip="{{'user.dianhuajiaoyan' | translate}}" placeholder="{{'user.dianhuajiaoyan' | translate}}">
		          </div>
		        </div>
		        <!--------------- 请输入0-32位数字或中划线 end--------------->
		        
		        <!--------------- 请输入0-16位数字或中划线 Start--------------->
		        <div class="form-group">
		          <label class="col-sm-2 control-label">{{'text.remind'|translate}}</label>
		          <div class="col-sm-10">
		            <input  class="form-control" name="var3" required ng-pattern="app.reg.fox" ng-model="vm.var3" maxlength="16"
		            uib-tooltip="{{'user.chuanzhenjiaoyan' | translate}}" placeholder="{{'user.chuanzhenjiaoyan' | translate}}">
		          </div>
		        </div>
		        <!--------------- 请输入0-16位数字或中划线 end--------------->
		        
		        <!--------------- 请输入0~255位字符 Start--------------->
		        <div class="form-group">
		          <label class="col-sm-2 control-label">{{'text.remind'|translate}}</label>
		          <div class="col-sm-10">
		            <input  class="form-control" name="var4" required ng-model="vm.var4" maxlength="256"
		            uib-tooltip="{{'common.op.remind6' | translate}}" placeholder="{{'common.op.remind6' | translate}}">
		          </div>
		        </div>
		        <!--------------- 请输入0~255位字符 end--------------->
		        
		        <!--------------- 带表单验证的文本框 end--------------->
		        
		        <div class="line line-dashed b-b line-lg pull-in"></div>
		        <!-- 文本域 -->
		        <div class="form-group">
		          <label class="col-sm-2 control-label">文本域</label>
		          <div class="col-sm-10">
		          	<textarea class="form-control demo-basic-form-textarea" readonly >
文本框通用属性：required--必填；readonly--只读；disabled--禁用；uib-tooltip：显示提示信息；ng-pattern：文本框校验
		          	</textarea>
		          </div>
		        </div>
        		</form>
	        </div>
		</div>
		<!-- 时间控件 -->
		<div class="panel panel-default">
	        <a href="http://www.my97.net/demo/index.htm" target="view_window"><div class="panel-heading font-bold" translate="forms.basic.date">
	        </div></a>
	        <div class="panel-body">
	        	<div class="form-group">
		    		<span class="panel-heading font-bold" translate="date.input"></span>
	    		</div>
	    		
	    		<!--------------- 点击输入框选择日期Start --------------->
	    		<div class="form-group">
			    	<i class=" icon-calendar pull-left demo-basic-form-icon-date"
			    	 id="time_icon"></i> 
			    	<input id="time" required class="demo-basic-form-date form-control" ng-model="vm.time"
					readonly placeholder="{{vm.time}}" wdate-picker="{el:'time',dateFmt:'yyyy-MM-dd HH:mm:ss'}" 
					name="time" ng-change="vm.monthMcmChange()">
		        </div>
		        <!--------------- 点击输入框选择日期end --------------->
		        
		        <div class="form-group">
		    		<span class="panel-heading font-bold" translate="date.button"></span>
	    		</div>
		        <!--------------- 带按钮的时间控件Start --------------->
	    		<div class="form-group">
		    		<div class="input-group col-sm-3">
					    	<input id="time" name="time" required class="form-control" readonly
		                    placeholder="{{'common.beginTime'|translate}}" ng-model="vm.time">
		                    <span class="input-group-btn ">
		                    <button class="btn btn-default" wdate-picker="{el:'startTime',dateFmt:'yyyy-MM-dd HH:mm:ss',hmsMenuCfg:{H:[2,4]}}"
		                    ng-model="vm.time" ng-change="vm.monthMcmChange()"><i class="glyphicon glyphicon-calendar"></i>
		                    </button>
		                    </span>
		            </div>       
		        </div>
		        <!--------------- 带按钮的时间控件end --------------->
		        
		        <div class="form-group">
		    		<span class="panel-heading font-bold" translate="date.startAndEnd"></span>
	    		</div>
	    		<div class="row">
		        <!--------------- 起始时间和结束时间Start --------------->
	    		<div class="form-group col-sm-4">
                    <div class="input-group">
                        <input id="startTime" name="startTime" required class="form-control" readonly
                               placeholder={{'common.beginTime'|translate}}
                               ng-model="vm.demo.dateStart">
                        <span class="input-group-btn ">
                            <button type="button" class="btn btn-default"
                                    wdate-picker="{el:'startTime',dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'endTime\')}'}"
                                    ng-model="vm.demo.dateStart">
                                <i class="glyphicon glyphicon-calendar"></i>
                            </button>
                        </span>
                    </div>
                </div>
                <!--筛选结束时间-->
                <div class="form-group col-sm-4">
                    <div class="input-group">
                        <input id="endTime" name="endTime" required class="form-control"
                               ng-model="vm.demo.dateEnd"
                               readonly placeholder={{'common.endTime'|translate}}>
                        <span class="input-group-btn ">
                            <button type="button"  class="btn btn-default"
                                    wdate-picker="{el:'endTime',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'startTime\')}'}"
                                    ng-model="vm.demo.dateEnd">
                                <i class="glyphicon glyphicon-calendar"></i>
                            </button>
                        </span>
                    </div>
                </div>
                <div class="form-group col-sm-4">
                	<button class="btn btn-sm btn-primary" ng-click="vm.search()">
                        <i class="fa fa-search"></i> {{'common.search'|translate}}
                    </button>
                </div>
		        <!--------------- 起始时间和结束时间end --------------->
		        </div>
	        </div>
		</div>
		<!-- 下拉框 -->
		<div class="panel panel-default">
		    <div class="panel-heading font-bold" translate="forms.basic.select">
		    </div>
		    <div class="panel-body">
		    	<div class="form-group">
		    		<a href="http://silviomoreto.github.io/bootstrap-select/" target="view_window"><span class="panel-heading font-bold" translate="select.bootstrapSelect"></span></a>
		    	</div>
		    	<hr/>
		    	<!--------------- bootstrap-select下拉框Start --------------->
		    	
		    	<!--------------- 单选下拉框Start --------------->
		        <div class="form-group">
			    	<span translate="select.Radio"></span>
			    	<select id="selectRadio" class="selectpicker" data-max-options="1" title="请选择"
					multiple ng-model="selectRadio" ng-change="vm.selectRadioClick(selectRadio)">
					</select>
		        </div>
		        <!--------------- 单选下拉框end --------------->
		        
		        <!--------------- 多选下拉框Start --------------->
		        <div class="form-group">
			    	<span translate="select.multiple"></span>
			    	<select id="selectMultiple" class="selectpicker" data-max-options="3" title="请选择"
					multiple ng-model="selectMultiple" ng-change="vm.selectMultipleClick(selectMultiple)">
					</select>
		        </div>
		        <!--------------- 多选下拉框end --------------->
		        
		        <!--------------- 级联下拉框Start --------------->
		        <div class="form-group">
			    	<span translate="select.cascade"></span>
			    	<select id="cascade" class="selectpicker" data-max-options="1" title="请选择"
					multiple ng-model="cascade" ng-change="vm.selectCascadeClick(cascade)">
					</select>
					
			    	<select id="selectCascade" class="selectpicker" data-max-options="1" title="请选择"
					multiple ng-model="selectCascade" ng-change="vm.selectCascadeClick(selectCascade)" 
					ng-show="vm.show" >
					</select>
		        </div>
		        <!--------------- 级联下拉框end --------------->
		        
		        <!--------------- bootstrap-select下拉框end --------------->
		        
		        <div class="form-group">
		    	<span class="panel-heading font-bold" translate="Select"></span>
		    	</div>
		    	
		    	<!--------------- select下拉框Start --------------->
		    	
		    	<!--------------- 单选下拉框Start --------------->
		    	<div class="form-group">
			    	<span translate="select.Radio"></span>
			    	<select class="form-control" name=selectRadio ng-change="vm.selectClick(vm.select)"
	                 ng-options="c.id as c.name for c in vm.selects"
	                 ng-model="vm.select"> </select>
		        </div>
		        <!--------------- 单选下拉框end --------------->
		        
		        <!--------------- 多选下拉框Start --------------->
		        <div class="form-group">
			    	<span translate="select.multiple"></span>
			    	<ui-select multiple ng-model="vm.vo" required theme="bootstrap">
						<ui-select-match placeholder="{{'common.select' | translate}}">
							{{$item.name}}
						</ui-select-match>
						<ui-select-choices repeat="p in vm.selects">
							<div ng-bind-html="p.name"></div>
						</ui-select-choices>
					</ui-select>
		        </div>
		        <!--------------- 多选下拉框end --------------->
		        
		        <!--------------- select下拉框end --------------->
			</div>
		</div>
	</div>
</div>
